<template>
    <div class="dhzn_role">
        <ul class="dhzn_r-nav f14">
            <span class="f12 g6 db tl p10">数据统计</span>
            <li @click="activerole = '/role/rolestat'" :class="activerole == '/role/rolestat' ? 'dhzn_r-n-navli' : 'dhzn_r-n-li'"><router-link to="/role/rolestat">角色管理</router-link></li>
            <span class="f12 g6 db bt1 tl p10">角色详情</span>
            <li @click="activerole = item.link" v-for="(item,key) in rolenav" :key="key"  :class="[activerole == item.link ? 'dhzn_r-n-navli' : 'dhzn_r-n-li']"><!-- item.ws, -->
                <router-link :to="item.link" class="dhzn_r-n-roter">{{item.name}}</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            navstate: 0,
            activerole: '',
            rolenav:[
                {name:'合 伙 人',ws:'ws20',link:"/role/rolelist"},
                {name:'合 作 伙 伴',ws:'ws6',link:"/role/rolejun"},
                {name:'企 业',ws:'ws27',link:"/role/rolefroli"},
                {name:'企 业 经 销 商',ws:'ws1',link:'/role/roledea'},
                {name:'企 业 门 店',ws:'ws6',link:'/role/roleboss'},
                {name:'企业门店店员',link:'/role/rolentman'},
                {name:'普 通 门 店',ws:'ws6',link:'/role/rolesh'},
                {name:'普通门店店员',link:'/role/rolecomman'},
                // {name:'分 销 用 户',ws:'ws6',link:''},
                // {name:'普 通 用 户',ws:'ws6',link:''},
            ]
        };
    },
    computed: {},
    watch: {},
    methods: {},
    created() {
        let that = this;
        that.activerole = this.$route.matched[1].path || '/';
        // that.activerole = this.$route.matched;
        console.log('子路由的',that.activerole)
    },
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    }
</script>
<style scoped>
ul,li{ 
    padding:0;margin:0;list-style:none
}
.dhzn_role{
    /* overflow: hidden; */
    display: flex;
    height: calc(100% - 116px)
}
.dhzn_r-nav{
    /* display: flex; */
    text-align: center;
    min-width: 120px;
    height: calc(100% + 60px);
    margin: -30px 30px 0 -30px;
    padding: 20px 0;
    background-color: #ffffff;
    box-sizing: border-box;
}
.dhzn_r-n-li{
    height: 50px;
    line-height: 50px;
}
.dhzn_r-n-li a{
    /* font-weight: 600; */
    color: #505050;
}
/* 选中状态 */
.dhzn_r-n-navli{
    height: 50px;
    line-height: 50px;
    background-color: #1bcaff;
    /* color: #ffffff; */
    box-shadow: 1px 0 3px #bebebe;
}
.dhzn_r-n-navli a{
    font-weight: 600;
    color: #ffffff;
    text-shadow: 1px 1px 1px #9b9b9b;
}
/* 路由沾满父级防止点不到 */
.dhzn_r-n-roter{
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
}
</style>